<template>
  <div class="form-container">
    <div class="form-group">
      <label for="title">文章标题：</label>
      <input id="title" type="text" v-model="title" class="input-text" />
    </div>
    <div class="form-group">
      是否公开：<el-switch
        v-model="publicopen"
        size="large"
        active-text="公开"
        inactive-text="私密"
        class="checkbox"
      />
    </div>
    <div class="form-group">
      <label for="content">文章内容：</label>
      <textarea id="content" v-model="content" class="textarea"></textarea>
    </div>
    <el-button type="primary" @click="publish" class="publish-button">发布</el-button>
  </div>
</template>

<script setup>
import http from '../help/http'
import { ref } from 'vue'

const title = ref('')
const publicopen = ref(false)
const content = ref('')

//发布
function publish() {
  http({
    method: 'post',
    url: '/posts',
    data: {
      title: title.value,
      content: content.value,
      status: publicopen.value
    }
  }).then((r) => {
    console.log(r)
    title.value = ''
    content.value = ''
    publicopen.value = false
  })
}
</script>

<style scoped>
.form-container {
  max-width: 600px;
  padding: 20px;
  border: 1px solid #ddd;
  border-radius: 8px;
  background-color: #f9f9f9;
}

.form-group {
  margin-bottom: 15px;
}

.form-group label {
  display: block;
  margin-bottom: 5px;
  font-weight: bold;
}

.input-text,
.textarea {
  width: 100%;
  padding: 8px;
  border: 1px solid #ccc;
  border-radius: 4px;
}

.input-text {
  height: 36px;
}

.textarea {
  height: 150px;
  resize: vertical;
}

.checkbox {
  margin-right: 8px;
}

.publish-button {
  display: block;
  margin-top: 20px;
}
</style>
